import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {actionCreator} from "../store/index";

class SearchTip extends PureComponent {

    render() {

        return (
            <div style={stWrapperStyle}>
                <div style={stTitleStyle}>大家都在搜</div>

                <ul style={stUlStyle}>
                    {
                        this.props.searchList.map((item, index) => {

                            return <li key={item.get('id')} style={stLiStyle}>{item.get("name")}</li>
                        })
                    }
                </ul>
            </div>
        );
    }

    componentDidMount() {
        if (this.props.searchList.size === 0) {
            this.props.getSearchData();
        }


    }
}

const mapState = (state) => {
    return {
        searchList: state.getIn(['bodyReducer', "searchList"])
    }
};

const dispatchMapState = (dispatch) => {
    return {
        getSearchData() {
            const action = actionCreator.getSearchData();
            dispatch(action);
        },
    };
};

export default connect(mapState, dispatchMapState)(SearchTip);


const stWrapperStyle = {
    width: "100%",
    marginTop: 30,
    backgroundColor: "white",
    boxShadow: "2px 2px 2px #ccc",
    borderRadius:4,
};

const stTitleStyle = {
    width: "100%",
    height: 42,
    lineHeight: "42px",
    borderBottom: "solid 2px #8db5d0",
    paddingLeft: 10,
    color: "#333333",
    fontSize: 16,
    boxSizing: "border-box",
};

const stUlStyle = {
    width: "100%",
    marginLeft: 16,
    paddingBottom: 20,
    overflow: "hidden",
};

const stLiStyle = {
    display: "block",
    float: "left",
    marginTop: 20,
    marginRight: 14,
    fontSize: 16,
    color: "#3367d6",
    textDecoration: "underline",
    cursor: "pointer",
};